<template>
  <div>
    <div>
      <img src="../static/pexels-cottonbro-studio-4089460.png" alt="" class="banner-image">
    </div>
    <div class="main_padd">
     <div class="recommend-box-title">
         <!-- 标题 -->
      <h2 class="recommend-title-text">配音员推荐</h2>
      <div class="recommend-tab-nav">
        <div class="recommend-tab-item recommend-items-act">热门</div>
        <div class="recommend-tab-item">最新</div>
        <div class="recommend-tab-item">特惠</div>
      </div>
     </div>
      <!-- 配音员列表 -->
      <div class="recommend-box-container">
        <div class="recommend-items">
          <!--  -->
          <div class="voice-ava">
            <img src="../static/336.jpg" alt="" class="image-ava">
          </div>
          <div class="voice-detail">
            <h4 class="voice-title">配音员文杰</h4>
            <p class="tags-detail">广告配音 专题配音 动画配音</p>
            <div class="content-box">
              <p>游戏广告：云客1</p>
              <p>游戏广告：云客2</p>
            </div>
          </div>
        </div>
        <div class="recommend-items">
          <!--  -->
          <div class="voice-ava">
            <img src="../static/336.jpg" alt="" class="image-ava">
          </div>
          <div class="voice-detail">
            <h4 class="voice-title">配音员文杰</h4>
            <p class="tags-detail">广告配音 专题配音 动画配音</p>
            <div class="content-box">
              <div class="content-items">
                <img src="../static/play-icon.png" alt="" class="play-icon">
                <p>游戏广告：云客1</p>
              </div>

              <div class="content-items">
                <img src="../static/play-icon.png" alt="" class="play-icon">
                <p>游戏广告：云客2</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {

  }

</script>

<style>
  .recommend-box-title{
    width: 100%;
    display: flex;
    align-items: center;
    margin: 70px 0 30px 0 ;
  }
  .recommend-title-text{
    font-size: 33px;
    font-weight:700;
    margin-right: 36px;
  }
  .recommend-tab-nav{
    display: flex;
    align-items: center;

  }
  .recommend-tab-item{
    font-size: 19px;
    color: #666666;
    margin: 0 16px;
  }
  .recommend-items-act{
    font-weight:700;
    color: #333;
    border-bottom: 2px solid salmon;
  }
  .banner-image {
    width: 100%;
  }

  body {
    background-color: #FAFAFA;
  }

  .recommend-box-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .recommend-items {
    margin-right: 25px;
    margin-bottom: 25px;
    height: 200px;
    background: #fff;
    display: flex;
    justify-content: center;
    border-radius: 14px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06);
  }

  .voice-ava {
    width: 200px;
    height: 200px;
    border-radius: 8px;
  }

  .image-ava {
    width: 200px;
    height: 200px;
    border-radius: 8px;
  }

  .voice-detail {
    padding: 18px 25px 18px 25px;
  }

  .voice-title {
    font-size: 22px;
  }

  .tags-detail {
    font-size: 14px;
    margin: 20px 0;
    color: #B3B3B3;
  }

  .play-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .content-box {
    width: 100%;
    border-top: 1px dotted #F1F1F1;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 0;
  }

  .content-items {
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
